<template>
  <div class="profiles">
    <div class="profiles-search">
      <div class="profiles-left">
        <i class="el-icon-search" style="color: #628196;font-weight: bold"></i>
        <el-input :placeholder="$t('Search')" v-model="searchParams.inputValue"></el-input>
        <div class="num-box">{{ profileShowList.length }}</div>
      </div>
      <div class="profiles-right">
        <el-button type="primary" icon="el-icon-plus" @click="handleOpenAddPlatform">{{ $t('AddPlatform')}}</el-button>
        <el-button type="primary" icon="el-icon-delete" @click="handleDeleteProfile" :disabled="!selectProfileList.length"></el-button>
        <el-button type="primary" icon="el-icon-plus" @click="handleOpenAddProfile">{{ $t('AddProfile')}}</el-button>
      </div>
    </div>
    <div class="profiles-content">
      <el-table
          :data="profileShowList"
          tooltip-effect="dark"
          @selection-change="handleSelectionChange"
          style="width: 100%">
        <el-table-column
            type="selection"
            label="No"
            width="55">
        </el-table-column>
        <el-table-column
            prop="name"
            :label="$t('Name')">
        </el-table-column>
        <el-table-column
            prop="profileId"
            :label="$t('ProfileId')">
        </el-table-column>
        <el-table-column
            prop="email"
            show-overflow-tooltip
            :label="$t('Email')">
        </el-table-column>
        <el-table-column
            prop="email"
            show-overflow-tooltip
            :label="$t('Freeze')">
          <template slot-scope="scope">
            <el-switch class="switch" v-model="scope.row.freeze"
                       active-value="freeze"
                       inactive-value="unfreeze" @change="() => handleChangeProfileFreezeStatus(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column :label="$t('All Platform')">
          <template slot="header" slot-scope="scope">
            <el-select v-model="searchParams.AllPlatform">
              <el-option
                  v-for="item in AllPlatformOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
              </el-option>
            </el-select>
          </template>
          <template slot-scope="scope">
            <el-select v-model="scope.row.subPlatformId" @change="() => handleUpdateProfilePlatform(scope.row)">
              <el-option
                  v-for="item in AllPlatformList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column :label="$t('AllCabinets')">
          <template slot="header" slot-scope="scope">
            <el-select v-model="searchParams.allCabinets">
              <el-option
                  v-for="item in AllCabinetsOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
              </el-option>
            </el-select>
          </template>
          <template slot-scope="scope">
            <el-select v-model="scope.row.cabinetId" @change="() => handleUpdateProfileCabinets(scope.row)">
              <el-option
                  v-for="item in AllCabinetsList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--  添加平台  -->
    <el-dialog
        top="10vh"
        :visible.sync="platformDialog"
        width="60%">
      <div class="platform-dialog">
        <div class="platform-dialog-left">
          <div class="platform-dialog-name">
            {{ $t('Manage Platform')}}
          </div>
          <div>
            <el-form ref="platformFormRef" :model="platformForm" :rules="platformRules">
              <el-form-item label="">
                <el-input :placeholder="$t('PlatformName')" class="dark_input border" v-model="platformForm.name"></el-input>
              </el-form-item>
            </el-form>
            <div style="display: flex;align-items: center">
              <el-button type="primary" @click="handleSavePlatform">{{ $t("Save Platform")}}</el-button>
              <el-button type="primary" v-show="platformForm.id" @click="handleCancelPlatform">{{ $t("Cancel Edit")}}</el-button>
            </div>
          </div>
        </div>
        <div class="line"></div>
        <div class="platform-dialog-right">
          <div class="platform-dialog-name">
            {{ $t('PlatformList')}}
          </div>
          <div class="platform-list">
<!--     遍历平台列表，支持选中，选中后样式发生变化，选中包括编辑和删除两个按钮       -->
            <div :class="['platform-item', platformForm.id === item.id ? 'active' : '']" v-for="item in AllPlatformList" :key="item.id">
              <div class="platform-item-name">{{ item.name }}</div>
              <div class="platform-item-btn">
                <el-button type="primary" icon="el-icon-edit" @click="handleSelectPlatform(item)"></el-button>
                <el-button type="primary" icon="el-icon-delete" @click="handleDeletePlatform(item)"></el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
    <!--  添加profile  -->
    <el-dialog
        top="10vh"
        :visible.sync="profileDialog"
        width="34vw">
      <div class="profile-dialog">
        <div class="profile-dialog-left">
          <div class="profile-dialog-name">
            {{ $t('Verify Profile')}}
          </div>
          <el-form
              label-position="top"
              ref="platformFormRef" :model="profileForm">
            <el-form-item  prop="site">
<!--       遍历站点 el-select       -->
              <el-select :placeholder="$t('Site')" v-model="profileForm.site">
                <el-option
                    v-for="item in profileSiteList"
                    :key="item"
                    :label="item"
                    :value="item">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="login">
              <el-input :placeholder="$t('Login')" class="dark_input2" v-model="profileForm.login"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input :placeholder="$t('Password')" class="dark_input2" v-model="profileForm.password"></el-input>
            </el-form-item>
          </el-form>
          <div style="display: flex;align-items: center;justify-content: center">
            <el-button type="primary" :disabled="isSubmitVerifyProfile" @click="handleVerifyProfile">{{ $t("Verify")}}</el-button>
          </div>
        </div>
        <div class="profile-dialog-right">
          <div class="profile-dialog-right-name">
            {{ $t('Profile Identity')}}
          </div>
          <div class="profile-dialog-user" v-if="verifyedProfileForm.siteId">
            <i class="el-icon-close" @click="handleClearProfile"></i>
            <el-image :src="verifyedProfileForm.photo"></el-image>
            <span class="profile-name">{{ verifyedProfileForm.name }}</span>
            <span class="profile-id">id: {{ verifyedProfileForm.siteId }}</span>
          </div>
          <div class="add-button" v-show="verifyedProfileForm.siteId" @click="handleSaveProfile">
            {{ $t('Add Profile')}}
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {defineComponent} from 'vue'
import {mapGetters} from "vuex";

export default defineComponent({
  name: "profiles",
  data() {
    return {
      searchParams: {
        inputValue: '',
        AllPlatform: 'AllPlatform',
        allCabinets: 'AllCabinets'
      },
      profileList: [
        {
          "id": "pd-68365636",
          "name": "Candice",
          "email": "philippines123333@qq.com",
          "photo": "https://i.gstatvb.com/shpzkl53jbmhogfqs.r100x100.b08c3544.jpg",
          "online": true,
          "cabinetId": "0c15dd2c-57a7-4ed0-acd6-cd9230577e01",
          "workShiftId": 3647,
          "status": "ACTIVE",
          "scopeAttachments": false,
          "scopeVideoCalls": false,
          "scopeDates": false,
          "scopePresents": false,
          "scopeMarriage": false
        }
      ],
      selectProfileList: [],
      // 平台
      AllPlatformList: [
        {
          "id": "64b788b551ccda9a79b36c4c",
          "name": "PD-1"
        },
        {
          "id": "64b7895b51ccda9a79b36c4f",
          "name": "PD-2"
        }
      ],
      // 柜子
      AllCabinetsList: [
        { "id": "1255d4cb-2602-45ba-b279-4d0381666353", "index": 3, "name": "hey", "totalProfiles": 1, "totalUsers": 1 },{ "id": "34439c02-3ba5-4be9-8d28-97c789c818eb", "index": 2, "name": "test", "totalProfiles": 0, "totalUsers": 2 },{ "id": "ba9b2fcf-2f0d-446e-b082-a554a719e9a3", "index": 1, "name": "box", "totalProfiles": 0, "totalUsers": 3 }
      ],
      // 添加平台
      platformDialog: false,
      platformForm: {
        name: ''
      },
      platformRules: {
        name: [
          { required: true, message: this.$t('PlatformName'), trigger: 'blur' }
        ]
      },
      // 配置
      profileDialog: false,
      // 站点列表
      profileSiteList: [],
      profileForm: {
        site: '',
        login: '',
        password: ''
      },
      profileRules: {
        site: [
          { required: true, message: this.$t('Site'), trigger: 'blur' }
        ],
        login: [
          { required: true, message: this.$t('Login'), trigger: 'blur' }
        ],
        password: [
          { required: true, message: this.$t('Password'), trigger: 'blur' }
        ]
      },
      verifyedProfileForm: {

      }
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
    profileShowList() {
      // 在检索框内输入 name,profile id 或 email，实现 profile 筛选展示。因为使用includes需要校验是否为string类型
      return this.profileList.filter(el => {
        return (el.name && el.name.includes(this.searchParams.inputValue)) || (el.profileId && el.profileId.includes(this.searchParams.inputValue)) || (el.email && el.email.includes(this.searchParams.inputValue))
      })
    },
    AllPlatformOptions() {
      return [
        {
          id: 'AllPlatform',
          name: this.$t('AllPlatform')
        },
          ...this.AllPlatformList
      ]
    },
    AllCabinetsOptions() {
      return [
        {
          id: 'AllCabinets',
          name: this.$t('AllCabinets')
        },
          ...this.AllCabinetsList
      ]
    },
    isSubmitVerifyProfile() {
      return Object.values(this.profileForm).some(el => !el)
    }
  },
  mounted() {
    this.profileList = this.userInfo.assignedProfiles.map(el => {
      return {
        ...el
      }
    })
    // 获取配置列表
    this.getProfileList()
    // 获取柜子
    this.$http.getCabinetList({
      ids: []
    }).then(res => {
      this.AllCabinetsList = res
    })
    // 获取平台
    this.getPlatformList()
  },
  methods: {
    handleSelectionChange(options) {
      this.selectProfileList = options
    },
    // 修改配置所属平台
    handleUpdateProfilePlatform(row) {
      this.$http.updatePlatform({
        info: {
          profiles: [row.profileId],
          sub_platform: row.subPlatformId
        }
      }).then(res => {
        this.$message({
          message: this.$t('Success'),
          type: 'success'
        })
      })
    },
    // 修改配置所属柜子
    handleUpdateProfileCabinets(row) {
      this.$http.updateCabinet({
        info: {
          profiles: [row.profileId],
          cabinetId: row.cabinetId
        }
      }).then(res => {
        this.$message({
          message: this.$t('Success'),
          type: 'success'
        })
      })
    },
    /**
     * 平台
     */
    // 获取平台
    getPlatformList() {
      this.$http.getPlatformList().then(res => {
        this.AllPlatformList = res
      })
    },
    // 打开添加平台
    handleOpenAddPlatform() {
      this.platformDialog = true
    },
    // 选中平台, 填充表单数据
    handleSelectPlatform(item) {
      this.platformForm = {
        ...item
      }
    },
    // 保存平台 区分新增和编辑
    handleSavePlatform() {
      this.$refs.platformFormRef.validate(valid => {
        if (valid) {
          if (this.platformForm.id) {
            this.$http.editPlatform({
              info: this.platformForm
            }).then(res => {
              this.$message({
                message: this.$t('Success'),
                type: 'success'
              })
              this.platformDialog = false
              this.getPlatformList()
            })
          } else {
            this.$http.addPlatform(this.platformForm).then(res => {
              this.$message({
                message: this.$t('Success'),
                type: 'success'
              })
              this.platformDialog = false
              this.getPlatformList()
            })
          }
        }
      })
    },
    // 取消编辑平台
    handleCancelPlatform() {
      this.platformForm = {
        name: ''
      }
    },
    // 删除平台
    handleDeletePlatform(item) {
      this.$http.deletePlatform({
        id: item.id
      }).then(res => {
        this.$message({
          message: this.$t('Success'),
          type: 'success'
        })
        this.getPlatformList()
      })
    },
    /**
     * 配置
     */
    getProfileList() {
      this.$http.getProfileList().then(res => {
        this.profileList = res.map(el => {
          return {
            cabinetId: '',
            subPlatformId: '',
            ...el,
            profileId: el.profile_id,
            freeze: el.status === this.enumType.FROZEN ? 'freeze' : 'unfreeze'
          }
        })
      })
    },
    // 更新配置状态
    handleChangeProfileFreezeStatus(row) {
      this.$http.freezeProfile({
        profileId: row.profileId,
        status: row.freeze
      }).then(res => {
        this.$message({
          message: this.$t('Success'),
          type: 'success'
        })
      })
    },
    // 删除配置
    handleDeleteProfile() {
      this.$http.deleteProfile({
        Profiles: this.selectProfileList.map(el => el.profileId).filter(id => id)
      }).then(res => {
        this.$message({
          message: this.$t('Success'),
          type: 'success'
        })
        this.getProfileList()
      })
    },
    handleOpenAddProfile() {
      this.profileDialog = true
      this.verifyedProfileForm = {

      }
      this.profileForm = {
        site: '',
        login: '',
        password: ''
      }
      // 获取站点
      this.$http.getSiteList().then(res => {
        this.profileSiteList = res
      })
    },
    // 校验配置
    handleVerifyProfile() {
      this.$refs.platformFormRef.validate(valid => {
        if (valid) {
          this.$http.checkProfile({
            info: this.profileForm
          }).then(res => {
            this.$message({
              message: this.$t('Success'),
              type: 'success'
            })
            this.verifyedProfileForm = {
              ...this.profileForm,
              "siteId": "68365636", "name": "Candice", "email": "philippines123333@qq.com", "photo": "图床网址/shpzkl4srn1b1o59f.r100x100.db7795d0.jpg"
            }
          })
        }
      })
    },
    // 清除配置
    handleClearProfile() {
      this.verifyedProfileForm = {

      }
    },
    // 保存配置
    handleSaveProfile() {
      this.$http.addProfile({
        login: this.verifyedProfileForm.login,
        password: this.verifyedProfileForm.password,
        site: this.verifyedProfileForm.site,
      }).then(res => {
        this.$message({
          message: this.$t('Success'),
          type: 'success'
        })
        this.profileDialog = false
        this.getProfileList()
      })
    }
  }
})
</script>

<style scoped lang="scss">
.profiles {
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
  grid-gap: 1.143rem;
  margin-top: 1.714rem;
  overflow: hidden;
  color: #dfdfdf;
  font-family: Inter,sans-serif;
  font-size: .75rem;
  .profiles-search {
    display: flex;
    align-items: center;justify-content: space-between;
    .profiles-left {
      width: 31.714rem;
      //height: 3.429rem;
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      overflow: hidden;
      font-family: Manrope,sans-serif;
      white-space: nowrap;
      letter-spacing: .01em;
      gap: 1.143rem;
      padding: 0 1.714rem 0 0.571rem;
      border-radius: 0.571rem;
      background: #122A3A;
      ::v-deep .el-input {
        .el-input__inner {
          background-color: transparent;
          border: none;
          padding: 0;
          color: #dfdfdf;
          font-size: 1rem;
          opacity: .5;
        }
        // input placeholder 颜色
        .el-input__inner::placeholder {
          color: #628196 !important;
          font-size: 1rem;
        }
      }
      .num-box {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.429rem 0.714rem;
        opacity: .8;
        border-radius: 0.429rem;
        background-color: #0a3d62;
        color: #fff;
        font-size: .857rem;
      }
    }
    .profiles-right {
      display: flex;
      align-items: center;
      gap: 1.143rem;
    }
  }
  .profiles-content {
    display: flex;
    flex-direction: row;
    ::v-deep .el-table {
      .profiles-scope-list {
        display: flex;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        align-items: center;
        font-size: .857rem;
        gap: 1vw;
      }
    }
  }
  ::v-deep .platform-dialog {
    height: 70vh;
    display: flex;
    gap: 3%;
    width: 100%;
    padding: 2%;
    border-radius: 1.143rem;
    background-color: #0e222e;
    .platform-dialog-name {
      font-size: 1.714rem;
      font-weight: 700;
      letter-spacing: .01em;
    }
    .platform-dialog-left {
      flex: 1 0 30%;
      display: flex;
      flex-direction: column;
      gap: 5%;
    }
    .line {
      align-self: flex-end;
      height: calc(100% - 3.857rem);
      border: 1px solid #2F677E;
    }
    .platform-dialog-right {
      flex: 1 0 56%;
      display: flex;
      flex-direction: column;
      gap: 5%;
      .platform-list {
        display: flex;
        flex-direction: column;
        gap: 0.571rem;
        width: 100%;
        height: 100%;
        overflow: auto;
        .platform-item {
          display: flex;
          flex-direction:column;
          justify-content: space-between;
          gap: 1.714rem;
          width: 95%;
          height: 20%;
          padding: 1.286rem 1.429rem;
          border: 1px solid #67CAE8;
          border-radius: 1.143rem;
          background-color: #112939;
          &.active {
            background-color: #1d4560;
          }
          .platform-item-name {
            width: 60%;
          }
        }
      }
    }
  }
  ::v-deep .profile-dialog {
    display: flex;
    height: 100%;
    color: #ebebeb;
    font-family: Inter,sans-serif;
    .el-input__inner {
      color: #ffffff !important;
    }
    .profile-dialog-left {
      display: flex;
      flex-direction: column;
      gap: 2.286rem;
      flex: 0 1 50%;
      padding: 1.143rem 1rem;
      .profile-dialog-name {
        font-size: 1.714rem;
        font-weight: 700;
        text-align: center;
        letter-spacing: .1rem;
      }
    }
    .profile-dialog-right {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      gap: 2.286rem;
      align-items: center;
      border-radius: 1.143rem;
      background-color: #0e222e;
      flex: 0 1 50%;
      padding: 1.143rem 0;
      .profile-dialog-right-name {
        font-size: 1.714rem;
        font-weight: 700;
        text-align: center;
        letter-spacing: .1rem;
        opacity: 0.5
      }
      .add-button {
        background-color: #2f677e;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: auto auto 0;
        padding: 0.643rem 3.857rem;
        cursor: pointer;
        border-radius: 0.571rem;
        font-family: Manrope,sans-serif;
        font-size: 1rem;
        margin-top: 0;
      }
      .profile-dialog-user {
        flex-grow: 1;
        width: 85%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        border: 1px solid #67CAE8;
        border-radius: 1.143rem;
        background-color: #062d4a;
        padding: 20px 0;
        .el-icon-close {
          position: absolute;
          color: #67CAE8;
          right: 10px;
          top: 10px;
          z-index: 99;
          cursor: pointer;
        }
        .profile-name {
          margin: 10px 0;
        }
      }
    }
  }
}
</style>